<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 连写表示且，逗号表示或 */
      #first,.line{
        background-color: pink;
      }
      /* 属性选择器，选中有abc属性的元素,不会选中子标签 */
      [abc]{
        color:aqua;
      }

      /* 选中app下的所有p标签 */
      /* .app p{
        color: red;
      } */

      /* 选中app的p直接子标签 */
      /* .app>p{
        color: black;
      } */

      /* p[abc]{
        color: yellow;
      } */

      [abc="ghi"]{
        color: yellow;
      }

      /* 选中tr：条件第2n个 */
      tr:nth-of-type(2n){
        background-color: pink;
        /* border: solid 1px black; */
      }
      td:nth-of-type(2n+1){
        background-color: aqua;
      }

      *{
        margin: 0;
      }
      /* 
      *css优先级!important 10000>行内 1000>id 100>class 10>标签名选择器  1
      *优先级一样时按书写顺序生效最后一个
      *多选择器时优先级按权值之和，
      */
      .line#first{
        font-size: 500px;
      }
      .line,#first{
        font-size: 100px;
      }

    </style>
  </headlineody>
    <p class="line" id="first" abc="abc">第一行</p>
    <p class="line" id="second" abc="def">第二行</p>
    <p class="line" id="third">第三行</p>
    <p class="line" id="firth">第四行</p>
    <div class="app">
      <p abc="ghi">123</p>
      <div>
        <p>789</p>
      </div>
      <p>456</p>
    </div>


    <table>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>

    <!-- 
    --蚂蚁输入法
    --.app>ul>li*3>a.zhuangtai
    --table.app>tr*3>td*3
    --ul>li[id="$aa"]*5 
    --table#t1.red>tr*3>td[rowspan="2"]{第$列}*4
    -->
    <div class="app">
      <ul>
        <li><a href="" class="zhuangtai"></a></li>
        <li><a href="" class="zhuangtai"></a></li>
        <li><a href="" class="zhuangtai"></a></li>
      </ul>
    </div>

    <table class="app">
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <ul>
      <li id="1aa"></li>
      <li id="2aa"></li>
      <li id="3aa"></li>
      <li id="4aa"></li>
      <li id="5aa"></li>
    </ul>

    <table id="t1" class="red">
      <tr>
        <td rowspan="2">第1列</td>
        <td rowspan="2">第2列</td>
        <td rowspan="2">第3列</td>
        <td rowspan="2">第4列</td>
      </tr>
      <tr>
        <td rowspan="2">第1列</td>
        <td rowspan="2">第2列</td>
        <td rowspan="2">第3列</td>
        <td rowspan="2">第4列</td>
      </tr>
      <tr>
        <td rowspan="2">第1列</td>
        <td rowspan="2">第2列</td>
        <td rowspan="2">第3列</td>
        <td rowspan="2">第4列</td>
      </tr>
    </table>
  </body>
</html>
